/*
  学习目标：jsx的插值表达式 - 与vue是一样的
  表达式： 可以写在等号右边
  1. 基本类型 number string boolean undefined null
  2. 对象，数组
  3. 其他： 函数、三元、逻辑、 JSX本身
*/
import React from 'react';
import ReactDOM from 'react-dom';
const obj = {
  name: 'zs',
  age: 20,
  info: {},
};

const arr = [<div>1</div>, <div>2</div>, <div>3</div>];

// JSX，本质上，就是创建 虚拟dom，而虚拟dom就是 对象
// ❌❌ 不能在 插值表达式 中再渲染对象
const divNode = (
  <div>
    <div>名字:{obj.name}</div>
    {/* 对象不能直接放在插值表达式中 */}
    {/* <div>info:{obj.info}</div> */}

    {/* 🌹 数组中的每项元素，都会当做一个dom节点渲染出来 */}
    {arr}
  </div>
);
console.log('divNode -----> ', divNode);

ReactDOM.render(divNode, document.getElementById('root'));
